<template>
    <div id="travelDestination">
        <el-link type="primary">详情介绍...</el-link>
        <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item class="travel_formItem1" label-width="18%" label="基地名称:" prop="name">
               云台山研学旅行基地
            </el-form-item>
            <el-form-item class="travel_formItem1" label-width="18%" label="特色标签:" prop="name">
                自然生态
            </el-form-item>
            <el-form-item class="travel_formItem1" label-width="18%" label="所属级别:" prop="name">
                省级
            </el-form-item>
            <el-form-item class="travel_formItem1" label-width="18%" label="适用学段:" prop="name">
                小学  初中  高中
            </el-form-item>
            <el-form-item class="travel_formItem1" label-width="22%" label="预定联系人:" prop="name">
                张璐
            </el-form-item>
            <el-form-item class="travel_formItem1" label-width="35.5%" label="预定联系人联系方式:" prop="name">
                15038277250
            </el-form-item>
            <el-form-item class="travel_formItem1" label-width="28.7%" label="已接待研学团体:" prop="name">
                28个
            </el-form-item>
            <el-form-item class="travel_formItem1" label-width="32%" label="累计接待研学人数:" prop="name">
                45738人
            </el-form-item>
            <el-form-item class="travel_formItem1" label-width="21.4%" label="近期接待研学团体:" prop="name">
                <el-table
                        :show-header="false"
                        class="travel_table"
                        :data="tableData"
                        style="width: 100%;">
                    <el-table-column
                            prop="date"
                            label=""
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label=""
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="">
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

    import {Link,Form,FormItem,Table,TableColumn} from "element-ui";

    export default {
        name: "TravelDestination",
        data(){
            return{
                tableData: [{
                    date: '郑州市第八中学',
                    name: '120人',
                    address: '已成行'
                }, {
                    date: '郑州市第九中学',
                    name: '452人',
                    address: '未成行'
                }, {
                    date: '郑州市胜利路小学',
                    name: '264人',
                    address: '未成行'
                }],
                ruleForm:{

                },
                rules:{

                }
            }
        },
        components:{
            'el-link':Link,
            'el-form':Form,
            'el-form-item':FormItem,
            'el-table':Table,
            'el-table-column':TableColumn
        }
    }
</script>

<style scoped>

    .demo-ruleForm{
        margin-top: 1%;
    }

    .travel_formItem1{
        width: 40%;
    }

    .travel_formItem1:nth-last-child(1){
        width: 60%;
    }

</style>